<script setup lang="ts">
import QrcodeVue from "qrcode.vue";
import type { Level, RenderAs, GradientType, ImageSettings } from "qrcode.vue";

interface Props {
  value?: string;
  level?: Level;
  renderAs?: RenderAs;
  size?: number;
  background?: string;
  foreground?: string;
  gradient?: boolean;
  gradientType?: GradientType;
  gradientStartColor?: string;
  gradientEndColor?: string;
  imageSettings?: ImageSettings;
}

const props = withDefaults(defineProps<Props>(), {
  value: "qrcode",
  level: "M",
  renderAs: "svg",
  size: 150,
  background: "#ffffff",
  foreground: "#000000",
  gradient: false,
  gradientType: "linear",
  gradientStartColor: "#000000",
  gradientEndColor: "#38bdf8",
  imageSettings: () => ({
    src: "https://github.com/scopewu.png",
    width: 30,
    height: 30,
    excavate: true,
  }),
});
</script>

<template>
  <qrcode-vue
    :value="props.value"
    :level="props.level"
    :render-as="props.renderAs"
    :size="props.size"
    :background="props.background"
    :foreground="props.foreground"
    :gradient="props.gradient"
    :gradient-type="props.gradientType"
    :gradient-start-color="props.gradientStartColor"
    :gradient-end-color="props.gradientEndColor"
    :image-settings="props.imageSettings"
  />
</template>